<template>
    <div class="login-box">
        <div class="content">
            <p>
                用户登录页面
            </p>
            <p>
                <el-input v-model="query.id" placeholder="请输入用户账号"></el-input>
            </p>
            <p>
                <el-input type="password" v-model="query.password" placeholder="请输入用户密码"></el-input>
            </p>
            <p>
                <el-checkbox v-model="remember">记住密码</el-checkbox>
            </p>
            <p>
                <el-button @click="loginEvt" type='primary'>登录</el-button>
            </p>
        </div>
    </div>
</template>

<script>
import { LOGIN_FLAG } from '@/config/common.conf'
import { deCodeApi, enCodeApi, md5Api } from '@/util'
import { getMenuListApi, getUserInfoApi, loginApi } from '@/apis/loginApi'
export default {
    data() {
        return {
            query: {
                "id": "",
                "password": ""
            },
            remember: false
        }
    },

    created() {
        let cache = localStorage.getItem('login-info')
        if (!!cache) {
            try {
                cache = deCodeApi(cache).split('----')
                this.query.id = cache[0]
                this.query.password = cache[1]
                this.remember = true
            } catch {
                localStorage.removeItem('login-info')
            }
        }
    },

    methods: {
        async loginEvt() {
            let result = await loginApi({
                ...this.query,
                password: md5Api(this.query.password)
            })

            if (result.code !== 200) {
                this.$message.error('登录失败，原因：' + result.message)
                return
            }

            sessionStorage.setItem(LOGIN_FLAG, enCodeApi(result.token + '----' + Date.now()))
            this.$store.commit('common/setToken', result.token)

            let user = await getUserInfoApi(this.query.id)
            if (user.code === 200) {
                this.$store.commit('common/setUserInfo', user.data)
            }

            let menu = await getMenuListApi()
            if (menu.code === 200) {
                this.$store.commit('common/setMenuList', menu.data.rows)
            }

            // 判断用户是否记住密码，如果记住密码需要缓存密码
            if (this.remember) {
                localStorage.setItem('login-info', enCodeApi(this.query.id + '----' + this.query.password))
            } else {
                localStorage.removeItem('login-info')
            }
            //添加异步代码，执行完了再跳转，不然还没监听到变化或者
            //路由还没添加完就执行跳转就会报错
            setTimeout(()=>{
                this.$router.push('/home')
            },0)
        }
    }
}
</script>

<style lang="less" scoped>
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        > .content {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 680px;
            height: 360px;
            background: #fff;
            margin: -180px auto auto -340px;
            border: solid 1px #ddd;
            border-radius: 10px;
            padding: 16px;
        }
    }
</style>